<template>
	<!-- 好友申请列表 -->
	<view class="applyLists" v-for="item in applyLists" :key="item.id">
		<view class="applyList">
			<!-- 账号 -->
			<view class="applyAccount">{{item.proposerName}}</view>
			<!-- 申请描述 -->
			<view class="applyDesc">
				<text class="name">申请描述：</text>
				<text>{{item.proposerRemark}}</text>
			</view>
			<!-- 状态 -->
			<view class="state" v-if="item.appliedRemark">
				<text class="name">状态：</text>
				<text>未添加</text>
			</view>
			<!-- 选择添加或拒绝以后，按钮禁用 -->
			<button type="primary" @click="agree(item)" :disabled="item.isHandled"
				:class="{ 'disabled-btn': item.isHandled }">
				接收
			</button>
			<button type="default" @click="reject(item)" :disabled="item.isHandled"
				:class="{ 'disabled-btn': item.isHandled }">
				拒绝
			</button>
		</view>


	</view>

</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';

	// 获取token
	const token = uni.getStorageSync('token');

	// 好友申请通知列表
	const applyLists = ref([])

	onLoad(async () => {
		console.log(token);

		// 获取所有好友申请
		const getApplyLists = await uni.request({
			url: "http://192.168.1.200:8080/applyFriend/applyRecord",
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'token': token,
			},
		})

		//applyPass:1 
		console.log(getApplyLists.data.data);
		applyLists.value = getApplyLists.data.data
		console.log(applyLists.value);
	})

	// 好友申请确认
	const agree = async (item) => {
		console.log(applyLists.value.targetUser, applyLists.value.appliedRemark);
		await uni.request({
			url: "http://192.168.1.200:8080/applyFriend/applyFriendConfirm",
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'token': token,
			},
			data: {
				// 本账号
				proposerId: item.proposerId,

				proposerName: item.proposerName,
				// 本人描述
				proposerRemark: item.proposerRemark,
				proposerReason: item.proposerReason,
				// id
				targetUser: item.targetUser,
				// 好友备注
				appliedRemark: item.appliedRemark,
				// 本人描述
				applyRemark: item.applyRemark,
				applyPass: 1
			}
		})

		uni.switchTab({
			url: "/pages/index/index"
		})

	}
</script>

<style lang="scss">
	.applyLists {
		margin-top: 40rpx;

		.applyList {
			background-color: skyblue;
			width: 86%;
			height: 200rpx;
			margin: 20rpx auto;
			border-radius: 20rpx;
			padding: 20rpx 0rpx;
			padding-left: 60rpx;


			.applyAccount {
				font-size: 40rpx;
				height: 80rpx;
			}

			.applyDesc {
				margin-bottom: 30rpx;
			}

			.state {
				display: inline-block;
				width: 50%;
			}

			button {
				display: inline-block;
				width: 140rpx;
				font-size: 20rpx;
				margin-right: 20rpx;
				/*inline-block 元素，它的垂直对齐方式默认是 基线（baseline），而不是顶部对齐。当给                   utton 设置 margin-top 时：
                  浏览器会尝试保持基线对齐，可能将整个容器的高度撑开以容纳这个 margin。*/
				vertical-align: top; //顶部对齐
				margin-top: -10rpx;



			}
		}
	}

	/* 禁用状态的按钮样式（灰色） */
	.disabled-btn {
		background-color: #cccccc !important;
		/* 灰色背景 */
		color: #ffffff !important;
		/* 灰色文字 */
		border-color: #cccccc !important;
		/* 灰色边框（如果需要） */
	}
</style>